<template>
  <view>
    <u-navbar :autoBack="true" title="余额提现" :placeholder="true" :bgColor="background"></u-navbar>
    <view class="withdrawal">
      <view class="content">


        <view class="item-title">
          可提现金额（元）
        </view>
        <view class="withdrawal-num">
          ￥<text class="num">{{info.balance || 0}}</text>
        </view>
        <view class="mode-title flex-box">
          <view class="box-1 title-text">
            到账方式
          </view>
          <view class="flex-box" @tap="exchangeWalletMode()">
            <text>{{ info && info.bank_no || '银行卡' }}</text>
            <u-icon name="arrow-right" color="#888888" size="20"></u-icon>
          </view>
        </view>
        <view class="mode-title ">
          <view class="box-1 ">
            提现金额
          </view>
          <view class="wallet-num flex-box">
            <text>￥</text>
            <input type="number" v-model="amount" placeholder="0.00" class="box-1 input_num"
                   @input="amountFun" />
          </view>
          <view class="item-tips flex-box">
            手续费（{{info.withdraw_handlefeerate || '0'}}%） <text class="tips-num">{{commission}}</text>
          </view>
        </view>
        <view class="tips">
          余额提现{{info.withdraw_handlefeerate || 6}}%个点手续费，提现金额需为100的整倍数
        </view>
        <view class="confirm-btn" @tap="comfirmFun()">
          立即提现
        </view>
      </view>
    </view>

    <u-popup :show="exchange_show" @close="exchange_show = false" :overlayStyle="{zIndex:98}" zIndex="99"  :round="10" :customStyle="{height:'300rpx'}">

      <view class="poupu-box" >
        <view class="exchange-popup">
          <view class="flex-box popup-title">
            <view class="box-1">
              <view class="title">
                提现到银行卡
              </view>
            </view>
            <u-icon size="28" name="close-circle" color="#000" @click="exchangeFun()"></u-icon>
          </view>
          <view class="sadsa-dsad" @click="zhuyi_show = true">注意事项<u-icon name="question-circle"></u-icon></view>
          <view style="height: 450rpx;overflow-y: auto;padding-top: 20rpx">
            <u--form labelPosition="left" :model="card" ref="uForm" labelWidth="80">
              <u-form-item label="姓名" borderBottom ref="item1">
                <u--input v-model="card.name" placeholder="请输入姓名" :disabled="!info.status==0" border="none"></u--input>
              </u-form-item>
              <u-form-item label="身份证" borderBottom ref="item1">
                <u--input v-model="card.cert_no" placeholder="请输入身份证号" :disabled="!info.status==0" border="none"></u--input>
              </u-form-item>
              <u-form-item label="收款卡号" borderBottom ref="item1">
                <u--input v-model="card.bank_account_no" placeholder="请输入收款银行卡号" :disabled="!info.status==0" border="none"></u--input>
              </u-form-item>
              <u-form-item label="手机号" borderBottom ref="item1">
                <u--input v-model="card.mobile" placeholder="请输入银行卡绑定的手机号" :disabled="!info.status==0" border="none"></u--input>
              </u-form-item>
            </u--form>
          </view>




          <!--				<view class="input-num">-->
          <!--					<view class="collection-title">-->
          <!--						收款账号-->
          <!--					</view>-->
          <!--					<input type="text" :class="[info.account?'val-line':'','input-box flex-box']" v-model="info.account"-->
          <!--						placeholder="请输入收款账号" @blur="blurFun()"/>-->
          <!--				</view>-->
          <!--				<view class="input-num">-->
          <!--					<view class="collection-title">-->
          <!--						收款银行-->
          <!--					</view>-->
          <!--					<input type="text" :class="[info.account_bank?'val-line':'','input-box flex-box']" v-model="info.account_bank"  placeholder="请输入收款银行" />-->
          <!--				</view>-->
          <!--				<view class="input-num">-->
          <!--					<view class="collection-title">-->
          <!--						收款户名-->
          <!--					</view>-->
          <!--					<input type="text" :class="[info.name?'val-line':'','input-box flex-box']" v-model="info.name" :placeholder="status==1?'请输入支付宝户名':'请输入开户姓名'"/>-->
          <!--				</view>-->
          <u-button  class="exchange-btn"  @click="confirmMsg()" :disabled="is_load" v-if="info.status==0">确认</u-button>
<!--          <view class="exchange-btn" @click="confirmMsg()">-->
<!--            确认-->
<!--          </view>-->
        </view>
      </view>

    </u-popup>
    <u-popup :show="code_show" @close="code_show = false"  :round="10" :customStyle="{height:'300rpx'}">

      <view class="poupu-box" >
        <view class="exchange-popup">
          <view class="flex-box popup-title">
            <view class="box-1">
              <view class="title">
                短信验证码
              </view>
            </view>
            <u-icon size="28" name="close-circle" color="#000" @click="code_show = false"></u-icon>
          </view>


          				<view class="input-num">
          					<view class="collection-title">
          						验证码: {{card.mobile}}
          					</view>
                    <input type="text" v-model="smsCode"
                           placeholder="请输入收款账号"/>


          				</view>

          <view class="exchange-btn" @click="statusCode()">
            确认
          </view>
        </view>
      </view>

    </u-popup>
<!--    注意事项-->
    <u-popup :show="zhuyi_show" zIndex="20075" :overlayStyle="{zIndex:20074}" @close="zhuyi_show = false"  :round="10" :customStyle="{height:'300rpx'}">

      <view class="poupu-box" >
        <view class="exchange-popup">
          <view class="flex-box popup-title">
            <view class="box-1">
              <view class="title">
                注意事项
              </view>
            </view>
            <u-icon size="28" name="close-circle" color="#000" @click="zhuyi_show = false"></u-icon>
          </view>

          <view style="line-height: 40rpx;margin-top: 15rpx">
            <view>1:必须填写本人的银行卡号</view>
            <view>2:对应银行卡绑定的手机号必须为本人</view>
            <view>3:对应手机号能够正常接收验证码</view>
          </view>

          <view class="exchange-btn" @click="zhuyi_show = false">
            关闭
          </view>
        </view>
      </view>

    </u-popup>
    <!--		<u-popup :show="wallet_mode_show" @close="exchangeWalletMode" :round="15" mode="bottom">-->
    <!--				<view class="flex-box wallet-mode">-->
    <!--					<image :src="newImgUrl+'/ico/icon-alipay.png'"  class="mode-alipay" @tap="goWalletPage(1)"></image>-->
    <!--					<u-line color="#999999" direction="col" length="64rpx"></u-line>-->
    <!--					<image :src="newImgUrl+'/ico/icon-bank.png'" class="mode-bank" @tap="goWalletPage(2)"></image>-->
    <!--				</view>-->
    <!--			</u-popup>-->
  </view>
</template>

<script>
import debounce from "@/utils/debounce.js"
export default {
  data() {
    return {
      sms:{
        text:"重发验证码",
        miao:0,
      },
      auth_sn:null,
      status: 2, //0 表示未选择 1支付宝，2银行卡
      isAgree: false,
      is_load:false,
      zhuyi_show:false,
      code_show:false,
      newImgUrl: '',
      smsCode:'',
      amount: '',
      type: 0,
      wallet_mode_show:false,
      info: {
        name:'',
        cert_no:'',
        bank_account:'',
        mobile:'',
        status:0
      },
      card: {
        name:'',
        cert_no:'',
        bank_account_no:'',
        mobile:'',
      },
      falg: true,
      background: 'transparent',
      exchange_show:false,
    }
  },
  onPageScroll(res) {
    if (res.scrollTop > 100) {
      this.background = '#fff'
    } else {
      this.background = 'transparent'
    }
  },
  onLoad(option) {
    this.newImgUrl = this.$c.newImgUrl
    this.getData()
  },
  computed:{
    commission(){
      let _num = (this.info.withdraw_handlefeerate/100).toFixed(2)
      return (this.amount*_num).toFixed(2)
    }
  },
  methods: {
    goWalletPage(val){
      this.status =val
      this.exchangeWalletMode()
      this.exchangeFun()
      this.getData()
    },
    //关闭选择支付宝或银行卡
    exchangeWalletMode(){
      this.exchange_show = !this.exchange_show
    },
    //关闭填写收款信息
    exchangeFun(){
      this.exchange_show = !this.exchange_show
    },
    //获取用户信息
    getData() {
      uni.showLoading({
        title: "加载中……"
      })
      this.is_load = true
      this.$u.api.withdrawLoadAccount({
        type: this.status == 2 ? 0 : 1
      })
          .then(res => {
            uni.hideLoading()
            this.is_load = false
            if (res.status) {
              this.info = {...res.msg}
              this.card = {...res.msg}
              this.card = {...{
                  name: res.msg && res.msg.name,
                  cert_no: res.msg && res.msg.cert_no,
                  bank_account_no: res.msg && res.msg.bank_no,
                  mobile: res.msg && res.msg.phone
                }}
            }
          })
          .catch(err => {
            uni.hideLoading()
            this.$u.toast('网络失败，请稍后再试！')
          })
    },
    //勾选协议
    agreeFun() {
      this.isAgree = !this.isAgree
    },
    //全部提现
    allWithdrawalFun() {
      this.amount = this.info.balance
    },
    //银行卡查询
    blurFun() {
      if (this.status == 2 && this.info.account) {
        uni.showLoading({
          title: '正在查询，请稍后'
        })
        this.$u.api.withdrawBankType({
          card_sn: this.info.account
        })
            .then(res => {
              console.log('res',res);
              uni.hideLoading()
              if (res.status) {
                this.info.account_bank = res.msg.bank_text
              } else {
                this.$u.toast(res.msg)
              }
            })
            .catch(err => {
              uni.hideLoading()
              this.$u.toast('网络失败，请稍后再试！')
            })
      }
    },
    //输入金额方法
    amountFun: debounce.debounce(function(e) {
      if (parseFloat(e.detail.value) > this.info.balance) {
        this.$nextTick(() => {
          this.amount = this.info.balance
        })
        return
      }
      if (parseFloat(e.detail.value) < 0) {
        this.$nextTick(() => {
          this.amount = 1
        })
      }
    }, 600),
    sendSms(){
      this.sms.miao = 60
      var shi = setInterval(res=>{
        if(this.sms.miao>0){
          this.sms.miao--
        }else{
          clearInterval(shi)
        }
      },1000)
      return
      uni.showLoading({
        title: '发送中'
      })
      this.$u.api.sendCode({code:this.smsCode,auth_sn:this.info.auth_sn})
          .then(res => {
            uni.hideLoading()
            if (res.code === 200) {
              this.code_show = false
              // this.exchange_show = false
              this.getData()
            } else {
              this.$u.toast(res.msg)
            }
          })
          .catch(err => {
            this.falg = true
            uni.hideLoading()
            this.$u.toast('网络失败，请稍后再试！')
          })


    },
    statusCode(){
      // this.smsCode
      uni.showLoading({
        title: '校验中'
      })

      this.$u.api.bankCode({sms_code:this.smsCode,auth_sn:this.auth_sn})
          .then(res => {
            uni.hideLoading()
            if (res.code === 200) {
              this.code_show = false
              // this.exchange_show = false
              this.$u.toast("绑定成功")
              this.getData()
            } else {
              this.$u.toast(res.msg)
            }
          })
          .catch(err => {
            this.falg = true
            uni.hideLoading()
            this.$u.toast('网络失败，请稍后再试！')
          })


    },
    //确认收款信息
    confirmMsg(){
      if (!this.card.name) {
        this.$u.toast('请输入姓名')
        return
      }
      if (!this.card.cert_no) {
        this.$u.toast('请输入身份证号')
        return
      }
      if (!this.card.bank_account_no) {
        this.$u.toast('请输入收款账号')
        return
      }
      if (!this.card.mobile) {
        this.$u.toast('请输入电话号码')
        return
      }
      uni.showLoading({
        title: '绑定中'
      })

      this.$u.api.bindBank(this.card)
          .then(res => {
            uni.hideLoading()
            if (res.code === 200) {
              this.auth_sn = res.data.auth_sn
              this.code_show = true
              this.exchange_show = false
              this.sms.miao = 60
              var shi = setInterval(res=>{
                if(this.sms.miao>0){
                  this.sms.miao--
                }else{
                  clearInterval(shi)
                }
              },1000)
              // this.getData()
            } else {
              this.$u.toast(res.msg)
            }
          })
          .catch(err => {
            this.falg = true
            uni.hideLoading()
            this.$u.toast('网络失败，请稍后再试！')
          })


      // this.exchangeFun()

    },
    //确认提现
    comfirmFun() {
      if (!this.falg) {
        this.$u.toast('请勿重复点击')
        return
      }
      if (this.status == 0) {
        this.$u.toast('请选择到账账户')
        return
      }
      if(!this.info.bank_no){
        this.$u.toast('填写提现信息')
        return
      }
      if (this.info.status==0) {
        this.$u.toast('请先完成绑卡验证！')
        return
      }
      if (parseFloat(this.amount) > parseFloat(this.info.balance)) {
        this.$u.toast('请输入正确的提现金额！')
        return
      }
      uni.showLoading({
        title: "申请中……"
      })
      this.falg = false
      let data = {
        amount: this.amount,
        type: this.status == 2 ? 0 : 1,
        name: this.info.name,
        account: this.info.account,
        account_bank: this.info.account_bank ?? ''
      }
      this.$u.api.withdraw(data)
          .then(res => {
            uni.hideLoading()
            this.falg = true
            if (res.status) {
              uni.redirectTo({
                url: './achieve'
              })
            } else {
              this.$u.toast(res.msg)
            }
          })
          .catch(err => {
            this.falg = true
            uni.hideLoading()
            this.$u.toast('网络失败，请稍后再试！')
          })

    },
    jumpUrl(url) {
      uni.navigateTo({
        url: "/pages/web-view/web-view?url=" + JSON.stringify(url)
      })
    },
  },
  filters:{
    textFilter(val){
      switch(parseInt(val)){
        case 0 :
          return "选择到账账户"
        case 1:
          return '支付宝'
        case 2:
          return '银行卡'
      }
    }
  }
}
</script>
<style scoped>
::v-deep .u-form-item__body{
  padding: 30rpx 0;
}
</style>
<style lang="scss">
page {
  background: linear-gradient(rgba(255, 223, 224, 1) 0%, rgba(255, 223, 224, 0.38) 30%, #F6F7FB 60%);
  font-size: 32rpx;
  color: #666666;
}

.item-tips {
  padding-top: 20rpx;
  font-size: 30rpx;
  .tips-num{
    color: #888888;
    display: inline-block;
    margin-left:10rpx;
  }
}
.tips{
  font-size:26rpx;
  margin:40rpx 0;
  text-align: center;
}

.withdrawal {
  padding:30rpx;
  font-size: 28rpx;
  .withdrawal-num{
    color: #D02227;
    font-weight: bolder;
    font-size:48rpx;
    margin-bottom:55rpx;
    .num{
      font-size:72rpx;
    }

  }

  .confirm-btn {
    width: 100%;
    height: 80rpx;
    line-height: 80rpx;
    text-align: center;
    color: #fff;
    margin:20% auto 0 ;
    font-weight: bold;
    background:#D02227;
    border-radius: 40rpx;
  }
}

.content {
  padding: 0 26rpx;

  .item-title {
    padding: 34rpx 0;
  }

  .mode-title {
    background: #fff;
    border-radius: 20rpx;
    padding:34rpx;
    margin-bottom:20rpx;
    .title-text{
      font-size:32rpx;
    }

    .tips-text {
      font-size: 30rpx;
    }
  }

  .wallet-num {
    color: #333333;
    font-size: 70rpx;
    font-weight: bold;
    border-bottom: 1px solid #CCCCCC;
    padding: 10rpx 0;
    align-items: flex-end;

    .input_num {
      height: 100rpx;
      font-size: 70rpx;
    }

    .wallet-text {
      font-weight: normal;
      color: #52CC8B;
      font-size: 32rpx;

    }
  }

  .input-box {
    margin: 20rpx 0 30rpx;
    height: 80rpx;
    width: 100%;
    box-sizing: border-box;
    line-height: 80rpx;
    border-radius: 10rpx;
    border-bottom: 1px solid #E6E6E6;
  }

  .val {
    background: #E6E6E6;
    padding-left: 30rpx;

    &:before {
      display: inline-block;
      content: '';
      margin-right: 20rpx;
      width: 1px;
      height: 30rpx;
      background: #CCCCCC;
    }
  }
}
.exchange-popup{
  padding:40rpx;
  font-size:26rpx;
  color:#888888;
  .popup-title{
    align-items: flex-start;
    .title{
      font-size:36rpx;
      color:#000;
      margin-bottom:10rpx;
    }
  }
  .input-num{
    background-color:#F6F7FB ;
    border-radius: 20rpx;
    padding:20rpx;
    margin-top: 40rpx;
    .ico{
      display: block;
      width: 44rpx;
      height: 45rpx;
      margin-right:20rpx;
    }
  }
  .tips{
    text-align: center;
    padding:20rpx 0;
  }
  .exchange-btn{
    color:#fff;
    display: block;
    width: 600rpx;
    margin:0 auto;
    text-align: center;
    border-radius: 40rpx;
    line-height: 80rpx;
    margin-top:58rpx;
    background: #D02227;
  }
}
.wallet-mode{
  padding:80rpx 0;
  justify-content: space-around;
  .mode-bank{
    width:271rpx ;
    height:75rpx ;
    display: block;
    margin: 0 auto;
  }
  .mode-alipay{
    width: 225rpx;
    height: 79rpx;
    display: block;
    margin: 0 auto;
  }
}
.collection-title{
  font-size:28rpx;
  color:#333;
  margin-bottom:20rpx;
}
.input-box{
  height: 70rpx;
  width: 100%;
  box-sizing: border-box;
  line-height: 70rpx;
  border-radius: 10rpx;
}
.val-line {
  background: #E6E6E6;
  padding-left: 30rpx;

  &:before {
    display: inline-block;
    content: '';
    margin-right: 20rpx;
    width: 1px;
    height: 30rpx;
    background: #CCCCCC;
  }
}
.mask{
  background: rgba(0,0,0,0.6);
  position: fixed;
  bottom:0;
  right:0;
  left:0;
  top:0;
  z-index:10;
  height: 50%;
}
.poupu-box{
  //position: fixed;
  //bottom:0;
  //right:0;
  //left:0;
  //z-index:10;
  //background: #fff;
  //border-radius: 20rpx 20rpx 0 0;
}
.sadsa-dsad{
  display: flex;
  align-items: center;
  margin-top: 10rpx;
}
.asdasdasdsa-sdasdas{
  display: flex;
  justify-content: space-around;
  align-items: center;
  .dasdasdas-btn{
    width: auto;
    height: 70rpx;
    margin: 0 !important;
    border-radius: 35rpx;
  }
}
</style>